<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="jbtn">海克斯科技-酱油</button>
    <button id="nbtn">海克斯科技-牛肉</button>
    <img src="images/niurou.png" alt="牛肉">

    <script>
        /* 
            需求：点击不同的按钮，在页面中显示不同的图片
         */
         // 1.获取button对象
         const jbtnObj = document.querySelector("#jbtn")
         // 2.获取牛肉按钮
         const nbtnObj = document.querySelector("#nbtn")
         // 3.获取图片按钮
         const imgObj = document.querySelector("img")
         //4.给按钮添加点击事件
         jbtnObj.onclick =function(){
             //点击酱油按钮的时候，把图片的src属性的值进行修改
            //  alert("变成酱油")
            imgObj.src="images/jiangyou.png"
            imgObj.alt="酱油"
            imgObj.title="酱油"
         };

            nbtnObj.onclick =function(){
             //点击酱油按钮的时候，把图片的src属性的值进行修改
            //  alert("变成酱油")
            imgObj.src="images/niurou.png"
            imgObj.alt="牛肉"
            imgObj.title="牛肉"
         };

    </script>
</body>
</html>